import React, { useEffect, useState } from 'react';
import {
  ProForm,
  ProFormDigit,
  ProFormText,
  ProFormRadio,
  ProFormTextArea,
  ProFormSelect,
  ProFormDatePicker,
} from '@ant-design/pro-components';
import { Form, Modal } from 'antd';
import { useIntl, FormattedMessage } from '@umijs/max';
import Tree, { DataNode } from 'antd/es/tree';
import { DictValueEnumObj } from '@/components/DictTag';
import TheUpload from '@/components/Upload';
import { getUrl, getUrlToList } from '@/utils';

export type TenantFormData = Record<string, unknown> & Partial<API.System.Tenant>;

export type TenantFormProps = {
  onCancel: (flag?: boolean, formVals?: TenantFormData) => void;
  onSubmit: (values: TenantFormData) => Promise<void>;
  open: boolean;
  values: Partial<API.System.Tenant>;
  tenantpackages: Map<any, string>;
  // menuCheckedKeys: string[];
  statusOptions: DictValueEnumObj;
};

const TenantForm: React.FC<TenantFormProps> = (props) => {
  const [form] = Form.useForm();
  const { tenantpackages } = props;
  // const [menuIds, setMenuIds] = useState<string[]>([]);
  const { statusOptions } = props;
  const approvalStatusOptions = { '0': '待审批', '1': '审批通过', '2': '审批拒绝' };

  useEffect(() => {
    form.resetFields();
    form.setFieldsValue({
      ...props.values,
      createBy: props.values.createBy,
      createTime: props.values.createTime,
      updateBy: props.values.updateBy,
      updateTime: props.values.updateTime,
      remark: props.values.remark,
      id: props.values.id,
      tenantName: props.values.tenantName,
      userName: props.values.userName,
      userPhone: props.values.userPhone,
      userEmail: props.values.userEmail,
      tenantPackage: props.values.tenantPackage ? props.values.tenantPackage.toString() : '',
      tenantTime: props.values.tenantTime,
      status: props.values.status ? props.values.status.toString() : '0',
      delFlag: props.values.delFlag,

      approvalStatus: props.values.approvalStatus? props.values.approvalStatus : "0",
      //图片

      licenseUrl:getUrlToList(props.values.licenseUrl),

      // licenseUrl:getUrlToList("http://124.222.19.104:39300/statics/huaijiu_20230927182051A012.png"),

      legalFrontIdCardUrl:getUrlToList(props.values.legalFrontIdCardUrl),
      legalReverseIdCardUrl:getUrlToList(props.values.legalReverseIdCardUrl),



      // licenseUrl_arrayList: props.values.licenseUrl,
      // legalFrontIdCardUrl_arrayList: props.values.legalFrontIdCardUrl,
      // legalReverseIdCardUrl_arrayList: props.values.legalReverseIdCardUrl,

  });
  console.log(props.values,form)
  // alert(typeof props.values.tenantPackage )

  // alert( JSON.stringify( tenantpackages) )

  }, [form, props]);

  const intl = useIntl();
  const handleOk = () => {
    form.submit();
  };
  const handleCancel = () => {
    props.onCancel();
  };
  const handleFinish = async (values: Record<string, any>) => {
    let value2 = Object.assign(values);
    // value2.menuIds = menuIds.join(',');
    var data = { ...value2,
      licenseUrl:getUrl(value2.licenseUrl),
      legalFrontIdCardUrl:getUrl(value2.legalFrontIdCardUrl),
      legalReverseIdCardUrl:getUrl(value2.legalReverseIdCardUrl),
    }
    props.onSubmit(data as TenantFormData);
  };
  const CustomProFormText = ({ name, label, required }) => {
    return (
      <ProFormText
        name={name}
        label={intl.formatMessage({
          id: 'system.Tenant.' + name,
          defaultMessage: label,
        })}
        placeholder={'请输入' + label}
        rules={[
          {
            required: required,
            message: <FormattedMessage id={'请输入' + label} defaultMessage={'请输入' + label} />,
          },
        ]}
      />
    );
  };
  return (
    <Modal
      width={640}
      title={intl.formatMessage({
        id: 'system.Tenant.title',
        defaultMessage: '编辑商户信息',
      })}
      forceRender
      open={props.open}
      destroyOnClose
      onOk={handleOk}
      onCancel={handleCancel}
    >
      <ProForm
        form={form}
        grid={true}
        layout="horizontal"
        submitter={false}
        onFinish={handleFinish}>
        {/* <ProFormText
          name="name"
          label={intl.formatMessage({
            id: 'system.Tenant.id',
            defaultMessage: '商户编码',
          })}
          // placeholder="请输入商户编码"
          rules={[
            {
              required: true,
              message: <FormattedMessage id="请输入商户编码！" defaultMessage="请输入商户编码！" />,
            },
          ]}
        /> */}

      

        <CustomProFormText name="id" label="商户编码" required={true} />
        <CustomProFormText name="tenantName" label="商户名称" required={true} />
        <CustomProFormText name="userName" label="管理员账号" required={true} />
        <CustomProFormText name="userPhone" label="手机号码" required={true} />
        <CustomProFormText name="userEmail" label="邮箱地址" required={true} />


        <ProFormSelect
          valueEnum={tenantpackages}
          name="tenantPackage"
          label={intl.formatMessage({
            id: 'system.Tenant.tenantPackage',
            defaultMessage: '商户套餐',
          })}
          placeholder="请输入商户套餐"
          rules={[
            {
              required: true,
              message: <FormattedMessage id="请输入商户套餐！" defaultMessage="请输入商户套餐！" />,
            },
          ]}
         
        />

    

        <ProFormRadio.Group
          valueEnum={statusOptions}
          name="status"
          label={intl.formatMessage({
            id: 'system.Tenant.status',
            defaultMessage: '商户状态',
          })}
          placeholder="请输入商户状态"
          rules={[
            {
              required: true,
              message: <FormattedMessage id="请输入商户状态！" defaultMessage="请输入商户状态！" />,
            },
          ]}
          fieldProps={{
            defaultValue: '0',
          }}
        />

      <ProFormDatePicker
        name="tenantTime"
        label="日期"
        placeholder="请选择租赁结束时间"
        rules={[
          {
            required: true,
            message: "请选择租赁结束时间",
          },
        ]}
      />

        {/* <CustomProFormText name="id" label="备注" required={true} /> */}

        <ProFormTextArea
          name="remark"
          label={intl.formatMessage({
            id: 'system.Tenant.remark',
            defaultMessage: '备注',
          })}
          placeholder="请输入备注"
          rules={[
            {
              required: false,
              message: <FormattedMessage id="请输入备注！" defaultMessage="请输入备注！" />,
            },
          ]}
        />


<div className="labTitle">企业信息  </div>
      <CustomProFormText name="tenantAddr" label="企业地址" required />
      <CustomProFormText name="legalName" label="法人姓名" required />
      <CustomProFormText name="contactName" label="联系人姓名" required />

      
      <CustomProFormText name="contactEmail" label="联系人邮箱" required />
      <CustomProFormText name="tenantLicenseNo" label="营业执照号" required />

      <Form.Item
          name="licenseUrl"
              label="营业执照"
          // rules={[{ required: true }]}
          extra="图片支持PNG、JPG、JPEG格式，大小不超过5MB"
        >
          <TheUpload
            listType="picture-card"
            maxCount={1}
            limitSize={5}
            // multiple={true}
            accept=".png, .jpg, .jpeg"
          />
      </Form.Item>

      <Form.Item
          name="legalFrontIdCardUrl"
          label="法人身份证正面"
          // rules={[{ required: true }]}
          extra="图片支持PNG、JPG、JPEG格式，大小不超过5MB"
        >
          <TheUpload
            listType="picture-card"
            maxCount={1}
            limitSize={5}
            accept=".png, .jpg, .jpeg"
          />
        </Form.Item>

        <Form.Item
          name="legalReverseIdCardUrl"
          label="法人身份证反面"
          // rules={[{ required: true }]}
          extra="图片支持PNG、JPG、JPEG格式，大小不超过5MB"
        >
          <TheUpload
            listType="picture-card"
            maxCount={1}
            limitSize={5}
            accept=".png, .jpg, .jpeg"
          />
        </Form.Item>


      {/* <BaseTextInput name="businessName" label="企业全称" required /> */}

        

        {/* <BaseTextInput name="legalEmail" label="邮箱" required /> */}

     
        
        {/* <BaseTextInput name="phone" label="联系人手机(+86)" required /> */}
        {/* <BaseTextInput name="checkCode" label="验证码" required /> */}
        <br></br>
        {/* <div class="labTitle">银行信息（选填项） </div> */}
        <CustomProFormText name="bankCard" label="请填写公司对公账号"  />
        <CustomProFormText name="bankName" label="开户银行"  />
        <CustomProFormText name="bankBranchName" label="开户支行"  />




        <ProFormRadio.Group
          valueEnum={approvalStatusOptions}
          name="approvalStatus"
          label='审核状态' 
          disabled={true}
        />




      </ProForm>
    </Modal>
  );
};

export default TenantForm;
